<template>
    <div class="Nav">
        <div v-show="top">
            <div>
                <div class="top" ref="top">
                    <van-icon name="arrow-left" @click="jump" />
                    <van-icon name="share" />
                </div>
            </div>
        </div>
        <div v-show="!top">
                <div class="left">
                    <van-icon name="arrow-left" @click="jump" />
                    <p class="title">{{title}}</p>
                    <van-icon name="share" />
                </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        path: String,
        title: String,
    },
    data() {
        return {
            top: true,
            left: false,
        };
    },
    created() {
        window.addEventListener("scroll", this.scrollEvent, true);
    },
    methods: {
        scrollEvent(e) {
            // console.log(e);
            // console.log(document.documentElement.offsetY);
            // console.log(document.body.scrollHeight);
            // console.log(window.pageYOffset);
            var sTop = document.body.scrollTop;
            if (sTop > 200) {
                // console.log(e.target);
                this.top = false;
            } else {
                this.top = true;
            }
            // console.log(sTop);
            // console.log(e.target);
        },
        jump() {
            this.$router.push("/");
        },
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollEvent, true);
    },
};
</script>

<style lang="scss" scoped>
.Nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    .top {
        width: 100vw;
        display: flex;
        padding: 0.18rem;
        font-size: 0.4rem;
        justify-content: space-between;
        color: pink;
    }
    .left {
        width: 100vw;
        display: flex;
        padding: 0.18rem;
        font-size: 0.4rem;
        justify-content: space-between;
        background-color: aliceblue;
        z-index: 100;
        color: black;
        .title {
            font-size: 0.2rem;
            line-height: 0.4rem;
        }
    }
}
</style>